<!--  -->
<template>
  <div class='cityConfigArea'>
    <div>
      <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-区域-板块</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click=" areaAdd">新增</Button>

    </div>
    <Table ref="TableHeight" class="table" :max-height="onresizeHeight" :columns="columns1"
      :data="data1"></Table>
    <!-- 分页 -->
    <div class="pagePublicStyle" v-show="pageData.total > 0">
      <div class="totalCount">
        当前第 {{pageData.page}} 页，
        当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第
        {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}}
        条，
        共 {{pageData.total}} 条
      </div>
      <Page :current="pageData.page" :total="pageData.total"
        :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun"
        @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer />
    </div>
    <!--新增板块 -->
    <Modal v-model="checkMoudle" title="新增板块" footer-hide width="500px">
      <div>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"
          :label-width="120">
          <FormItem label="区域" prop="parentCode">
            <Select v-model="formValidate.parentCode" placeholder="请选择"
              class="cityConfigArea_moudle_select">
              <Option v-for="item in parentCodeList" :key="item.cityCode"
                :value="item.cityName">{{item.cityName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="板块" prop="titleArray">
            <div v-for="(item,index) in formValidate.cityPlateList" :key="index"
              class="cityConfigArea_moudle_inputList">
              <Input type="text" v-model="item.title" placeholder="请输入模块名字"
                class="cityConfigArea_moudle_select"></Input>
              <Icon v-if="index == 0" size="24" class="cityConfigArea_moudle_icon"
                color="#4fe669" @click="formValidate.cityPlateList.push({title:''})"
                type="md-add-circle" />
              <Icon v-else color="red" size="24" class="cityConfigArea_moudle_icon"
                type="md-close-circle" @click="formValidate.cityPlateList.splice(index,1)" />
            </div>
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="checkMoudle = false">取消</Button>
            <Button type="primary" @click="addAreaSubmit('formValidate')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!--自定义排序 -->
    <Modal :width="600" v-model="customSortModal" title="自定义排序" :mask-closable='false'
      :footer-hide='true' @on-cancel="customSortModal = false">
      <div class="customSortStyle">
        <ul class="customSortHead">
          <li>
            <div>排序</div>
            <div>区域</div>
            <div>自定义</div>
          </li>
        </ul>
        <div class="noDataStyle" v-show="uploadList.length == 0">暂无数据</div>
        <ul class="customSortBody" v-show="uploadList.length > 0">
          <draggable v-model="uploadList" draggable="li" @end="onEnd">
            <li v-for="(item, index) in uploadList" :key='index'>
              <div>{{index+1}}</div>
              <div>{{item.title}}</div>
              <div><Button :disabled="index == 0 ? true : false"
                  @click="moveUpFun(index)">上移</Button><Button
                  :disabled="index+1 == uploadList.length ? true : false"
                  @click="moveDownFun(index)">下移</Button></div>
            </li>
          </draggable>
        </ul>
        <div class="customSortFoot" v-show="uploadList.length > 0">
          <Button @click="customSortModal = false">取消</Button>
          <Button type="primary" @click="handleSubmit" style="margin-left: 10px">确定</Button>
        </div>
      </div>
    </Modal>
    <!--编辑 -->
    <Modal :width="500" v-model="currentDateDetail" title="板块编辑" :mask-closable='false'
      :footer-hide='true' @on-cancel="customSortModal = false">
      <div>
        <Form ref="currentDate" :model="currentDate" :rules="ruleValidateDetail"
          :label-width="120">
          <FormItem label="板块" prop="streetName">
            <Input type="text" v-model="currentDate.streetName" placeholder="请输入模块名字"
              class="cityConfigArea_moudle_select"></Input>
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="currentDateDetail = false">取消</Button>
            <Button type="primary" @click="editAreaSubmit('currentDate')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- 删除弹出框 -->
    <!-- <Modal v-model="deleteModal" width="360">
        <div style="text-align:center">
            
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>
        </div>
    </Modal> -->

  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import generalConfiguration from '@/biz/generalConfiguration/generalConfiguration'
  export default {
    components: { draggable },
    data() {
      const ruleValidateCodeList = (rule, data, callback) => {
        let flag = false
        data.forEach((item) => {
          item.title && (flag = true)
        })
        if (!flag) return callback('请输入至少一个模块的名称')
        callback()
      }
      return {
        pageData: {
          total: 0,
          page: 1,
          rows: 10,
          pageSizeOpts: [10, 30, 40, 50],
        },
        formValidate: {
          parentCode: '',
          cityPlateList: [{ title: '' }],
        },
        ruleValidate: {
          parentCode: [
            { required: true, message: '请选择区域', trigger: 'blur' },
          ],
          cityPlateList: [{ validator: ruleValidateCodeList, trigger: 'blur' }],
        },
        parentCodeList: [],
        uploadList: [],
        onresizeHeight: 0,
        checkMoudle: false,
        columns1: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row._index + 1)
          },
        },
        {
          title: '城市',
          key: 'cityName',
          align: 'center',
        },
        {
          title: '区域',
          key: 'parentName',
          align: 'center',
        },
        {
          title: '板块',
          key: 'streetName',
          align: 'center',
        },
        {
          title: '操作',
          key: 'address',
          fixed: 'right',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                  },
                  style: {
                    color: '#02b0f0',
                  },
                  on: {
                    click: () => {
                      this.toEdit(params.row)
                    },
                  },
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                  },
                  style: {
                    color: '#02b0f0',
                  },
                  on: {
                    click: () => {
                      this.toDelete(params.row)
                    },
                  },
                },
                '删除'
              ),
            ])
          },
        }, ],
        data1: [],
        customSortModal: false,
        importObj: {
          modalShow: false,
          title: '城市-区域-板块',
        },
        updateObj: {
          grid_importfile: 'grid_importfile',
          appName: 'web_back',
          appVersion: '1.0',
          code: '',
          api: '',
        },
        code: '',
        currentDate: {},
        currentDateDetail: false,
        ruleValidateDetail: {
          streetName: [
            { required: true, message: '请填写区域', trigger: 'blur' },
          ],
        },
        deleteModal: false,
        city: '上海',
      }
    },
    computed: {},
    watch: {},
    methods: {
      //获取类表
      getList() {
        this.code = this.$route.query.code
        let { page, rows } = this.pageData
        let params = { page, rows, cityId: this.$route.query.cityId }
        generalConfiguration.areaPages(params).then((res) => {
          this.data1 = res.list
          this.pageData.total = res.total - 0
          console.log('区域列表', res)
        })
      },
      //点击新增
      areaAdd() {
        this.getAreacode(4, this.code, 'parentCodeList')
        this.checkMoudle = true
      },
      //增加域块
      addAreaSubmit(name) {
        console.log(6666)
        this.$refs[name].validate((valid) => {
          console.log(valid)
          if (valid) {
            console.log('可以提交了')
            let params = {},
              { parentCode, cityPlateList } = this.formValidate
            cityPlateList.map((item) => {
              item.areaName = parentCode
              item.cityCode = this.code
              item.cityName = this.$route.query.title
            })
            params.cityPlateList = cityPlateList
            generalConfiguration.areaAdd(params)
              .then((res) => {
                this.$Message.success('增加板块成功')

                console.log('提价成功')
                this.$refs[name].resetFields()
                this.formValidate.cityPlateList = [{ title: '' }]
                this.formValidate = Object.assign({}, this.formValidate)
                this.checkMoudle = false
                this.getList()
              })
              .catch((err) => this.$Message.error(err))
          }
        })
      },
      //获取当前城市的区域
      getAreacode(level = 2, num, name) {
        console.log('发生了请求', num)
        if (level != 2 && !num) return
        //层级(1:国 2:省 3:市 4:区)
        let params = { level, parentCode: num, rows: 100 }
        generalConfiguration.cityList(params).then((res) => {
          this[name] = res.list
          console.log('获取列表城市', res)
        })
      },
      //自定义排序
      selfSort() {},
      // 上移
      moveUpFun(index) {
        if (index == 0) {
          return
        }
        this.swapItems(this.uploadList, index, index - 1)
      },
      // 下移
      moveDownFun(index) {
        if (index == this.uploadList.length - 1) {
          return
        }
        this.swapItems(this.uploadList, index, index + 1)
      },
      //拖拽
      onEnd() {},
      //排序确定
      handleSubmit() {
        let code = []
        this.uploadList.map((item, index) => {
          code.push({ code: item.code, sortField: index })
        })
        console.log(code)
        this.$Message.success('排序成功！')
        this.customSortModal = false
        //重新拉取列表

        //   apiPost(Api.dosystem.updateAreaSortField, code).then((res) => {
        //     this.$Message.success('排序成功！');
        //     this.customSortModal = false
        //     this.getData();
        //   })
      },
      //点击编辑按钮
      toEdit(mess) {
        console.log(mess)
        this.currentDate = mess
        this.currentDateDetail = true
      },
      //编辑确定
      editAreaSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let { streetName, streetId, status } = this.currentDate
            generalConfiguration.areaUpdate({ streetId, streetName,status }).then((res) => {
              this.$Message.success('修改成功')
              this.currentDateDetail = false
            })
          }
        })
      },
      //取消提示
      toDelete(mess) {
        this.$Modal.confirm({
          title: '删除',
          content: '你确认删除么？',
          closable: true,
          onOk: () => {
            generalConfiguration.areaDelete({ streetId: mess.streetId }).then((res) => {
              this.$Message.success('删除成功')
              this.getList()
            })
          },
          onCancel: () => {},
        })
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        if (page != 1 || this.pageData.page != 1) {
          this.pageData.page = page
          this.getList()
        }
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(page) {
        this.pageData.rows = page
        this.pageData.page = 1
        this.getList()
      },
    },
    created() {
      this.getList()
    },
    mounted() {},
  }
</script>
<style lang='scss' scoped>
  .cityConfigArea {
    &_alertMess {
      font-size: 16px;
      font-weight: 700;
      float: left;
      margin-top: 6px;

      .red {
        color: red;
      }
    }

    &_alertMessButton {
      margin: 0 8px 25px 8px;
    }

    &_moudle_select {
      width: 306px;
      margin-right: 10px;
    }

    &_moudle_inputList {
      margin-bottom: 10px;
    }

    &_moudle_icon {
      vertical-align: text-top;
    }
  }

  .cityList_moudle_footer {
    ::v-deep .ivu-form-item-content {
      text-align: right;
      margin-right: 42px;
    }
  }

  .customSortStyle {
    text-align: left;

    .customSortHead,
    .customSortBody {
      li {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #eeeeee;

        div {
          flex: 1;
          text-align: center;

          button {
            margin: 0px 6px;
          }
        }

        div:first-child {
          flex: 0.4;
        }
      }
    }

    .customSortHead li {
      padding-bottom: 10px;
    }

    .customSortBody li {
      padding: 10px 0;
      line-height: 31px;
    }

    .customSortBody {
      max-height: 400px;
      overflow-y: auto;
    }

    .customSortFoot {
      padding-top: 14px;
      text-align: center;
    }
  }

  .cityConfigArea_cancelButton {
    margin-right: 6px;
  }
</style>